<template>
	<view class="list-item rounded overflow-hidden"
		@click="$emit('click')"
	>
		<image :src="imagePath" 
				class="image"
				mode="widthFix"
				></image>
		<view class="title">
			{{title}}
		</view>
		<view class="author mt-1 flex">
			<view class="flex justify-between align-center">
				<u-avatar :src="avatarPath"></u-avatar>
			</view>
			<view class="ml-1 username">
				{{username}}
			</view>
		</view>
		<view class="like flex justify-between align-center">
			<u-icon :name="isLike?'heart-fill' : 'heart'" 
					:color="isLike? 'red' : '#a8a8a8'" 
					size="28"
					:labelSize="12"
					labelColor="#8d8d8d"
			></u-icon>
			<view class="text">
				{{likeNum}}
			</view>
		</view>
		
	</view>	
</template>

<script>
	import {
		mergeBackPath
	} from "@/utils/file.js";
	
	export default {
		name: 'item',
		props: {
			src: {
				type: String,
				required: true,
				default: ''
			},
			// height: {
			// 	type: Number,
			// 	required: true,
			// 	default: 200
			// },
			avatar: {
				type: String,
				required: true,
				default: ''
			},
			title: {
				type: String,
				required: true,
				default: ''
			},
			isLike: {
				type: Boolean,
				required: true,
				default: false
			},
			likeNum: {
				type: Number,
				required: true,
				default: 0
			},
			username: {
				type: String,
				required: true,
				default: '系统'
			}
		},
		computed: {
			imagePath() {
				return mergeBackPath(this.src)
			},
			avatarPath() {
				return mergeBackPath(this.avatar)
			}
		},
		data() {
			return {
				
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.list-item{
	margin-bottom: 10rpx;
	cursor: pointer;
	.image{
		width: 100%;
		min-height: 300rpx;
		max-height: 520rpx;
		border-radius: 15rpx;
	}
	.title{
		font-size: 27rpx;
		// font-weight: bold;
		color: #000;
	}
	.author{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		.username{
			max-width: 140rpx;
			min-width: 140rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #8d8d8d;
			font-size: 25rpx;
			padding-top: 8rpx;
		}
	}
	.like{
		float: right;
		// background-color: red;
		/* #ifdef APP-PLUS || MP-WEIXIN */
		margin-top: -40rpx;
		/* #endif */
		/* #ifdef H5 */
		margin-top: -35rpx;
		/* #endif */
		max-width: 140rpx;
		overflow: hidden;
		.text{
			font-size: 25rpx;
			max-width: 140rpx;
			overflow: hidden;
			color: #8d8d8d;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
	}
}	
</style>